import { useState, useImperativeHandle, Ref, useRef } from 'react';
import { Modal, message, Form, Input } from 'antd';
import { LockOutlined } from '@ant-design/icons';
import { changePassword } from 'api/user';
import md5 from 'js-md5';
import { useNavigate } from 'react-router-dom';

type ItemParams = Parameters<typeof Form.Item>[0];
type ContentType = Array<
	{
		type: 'text' | 'password' | 'textarea';
	} & ItemParams
>;

type PromptParams = { title: string; content: ContentType; onOk: (e: any) => void };

export interface PromptMethods {
	prompt: (e: PromptParams) => void;
}

type Props = { innerRef: Ref<PromptMethods | undefined> };

const Prompt = (props: Props) => {
	let alterClose = useRef<any>();
	const navigator = useNavigate();
	const { Item, useForm } = Form;
	const [form] = useForm();

	const [title, settitle] = useState('');
	const [open, setopen] = useState(false);
	const [content, setcontent] = useState<ContentType>([]);

	useImperativeHandle(
		props.innerRef,
		(): PromptMethods => ({
			prompt,
		})
	);

	const prompt = ({ title, content, onOk }: PromptParams) => {
		settitle(title);
		setcontent(content || [{ label: '请输入', name: 'message', rules: null, type: 'input' }]);
		alterClose.current = onOk;
		setopen(true);
	};
	const onFinish = (e: any) => {
		alterClose.current(e);
		setopen(false);
	};

	return (
		<Modal
			title={<p className=' text-base mb-4'>{title || '提交信息'}</p>}
			open={open}
			onOk={form.submit}
			onCancel={() => {
				onFinish(false);
			}}
			destroyOnClose={true}>
			<Form form={form} onFinish={onFinish} size='large' layout='vertical' autoComplete='off' preserve={false}>
				{content &&
					content.map(({ label, name, rules, type }) => (
						<Item label={label} name={name} rules={rules}>
							<Input type={type} />
						</Item>
					))}
			</Form>
		</Modal>
	);
};

export default Prompt;
